<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
   
    <a-row :style="`min-height: ${pageMinHeight-20}px`">
      <a-col :span="4" class="tree-panel" :style="`min-height: ${pageMinHeight-20}px`">
        <div class="btn-group">
          <a-button type="primary" size="small">新增</a-button>
          <a-button type="default" size="small">修改</a-button>
          <a-button type="danger" size="small">删除</a-button>
        </div>
        <a-tree
          checkable
          :tree-data="treeData"
          :default-expanded-keys="['0-0-0', '0-0-1']"
          :default-selected-keys="['0-0-0', '0-0-1']"
          :default-checked-keys="['0-0-0', '0-0-1']"
          @select="onSelect"
          @check="onCheck"
        >
        </a-tree>
      </a-col>
      <a-col :span="20" style="padding: 10px;">
        <div class="btn-group">
          <a-button type="primary" size="small" @click="onTableCreate">新增</a-button>
          <a-button type="default" size="small">修改</a-button>
          <a-button type="danger" size="small" @click="onTableDelete">删除</a-button>
        </div>
        <a-table
          :columns="tableColumns"
          :data-source="tableData"
          size="small"
          bordered
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        >

        </a-table>
      </a-col>
    </a-row>

    <a-modal
      title="Title"
      :visible="formModalVisible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      modal
    </a-modal>
  </div>
</template>

<script>
  const tableColumns =  [
    {
      dataIndex: 'dictKey',
      key: 'dictKey',
      title: '字典键名(Key)',
      width: '200px'
    },
    {
      dataIndex: 'dictValue',
      key: 'dictValue',
      title: '字典值(Value)'
    }
  ]

  const tableData = [
    {
      key: '1',
      dictKey: 'Jax',
      dictValue: 33
    },
    {
      key: '3',
      dictKey: 'Tim',
      dictValue: 99
    }
  ]
  import {mapState} from 'vuex'
  export default {
    name: 'DataDict',
    data() {
      return {
        selectedRowKeys: [],
        treeData : [
          {
            title: 'parent 1',
            key: '0-0',
            children: [
              {
                title: 'parent 1-0',
                key: '0-0-0',
                disabled: true,
                children: [
                  { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
                  { title: 'leaf', key: '0-0-0-1' },
                ],
              },
              {
                title: 'parent 1-1',
                key: '0-0-1',
                children: [{ key: '0-0-1-0', slots: { title: 'title0010' } }],
              },
            ],
          },
        ],
        tableColumns,
        tableData,
        formModalVisible: false
      }
    },
    methods: {
      onSelect(selectedKeys, info) {
        console.log('selected', selectedKeys, info);
      },
      onCheck(checkedKeys, info) {
        console.log('onCheck', checkedKeys, info);
      },
      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
      },
      onTableCreate(){
        this.formModalVisible = true
      },
      onTableDelete(){
        if (this.selectedRowKeys.length<1){
          this.$message.error('还未选择任何要操作的记录');
          return
        }
        this.$confirm({
          title: '确定要删除选中的记录吗?',
          onOk() {
            console.log('OK');
          },
          content: '删除后的记录将无法恢复!',
          onCancel() {
            console.log('Cancel');
          },
          class: 'test',
        });
      },
      handleCancel() {
        console.log('Clicked cancel button');
        this.formModalVisible = false;
      },
    },
    computed: {
      ...mapState('setting', ['pageMinHeight']),
      
    }
  }
</script>

<style scoped lang="less">
.new-page{
  height: 100%;
  background-color: @base-bg-color;
  border-radius: 4px;
  padding: 10px;
}

.tree-panel{
  border-right: 1px solid #ddd;
  height: 100%;
  padding: 10px;
}

.btn-group {
  margin-bottom: 10px;

  button {
    margin-right: 10px;
  }
}
</style>